import {  LockOutlined, ManOutlined, UserOutlined, WomanOutlined } from '@ant-design/icons'
import React, { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import style from '@/pages/Index/Info/index.module.scss'
import { Avatar, Button, Empty, Tabs, message } from 'antd'
import { getPrivacyApi, getUserDetail, updateFans } from '@/common/api'
import { getLs } from '@/common/common'
import _ from 'lodash'
import CardList from '../Common/CardList'
import { connect } from 'react-redux'
import Fans from '../Info/Fans/Fans'
function UserDetail() {
  const [searchParams] = useSearchParams()
  const otherId = searchParams.get('sign')
  const userId = getLs("userInfo")._id
  const [userInfo, setInfo] = useState({})
  const [otherPrivacy, setPrivacy] = useState({})
  const [fansShow, setFansShow] = useState(false)
  const [type,setType] = useState("")
  useEffect(() => {
    getDetail()
  }, [])

  const getDetail = async () => {
    const RES = await getUserDetail({ otherId, userId })
    if (RES.code === 200) {
      setInfo(RES.data)
      setPrivacy(RES.data.userPrivacy)
    }
  }
  if (Object.keys(userInfo).length === 0) {
    return <div>加载中...</div>
  }
  const items = [
    {
      key: '1',
      label: <div>作品</div>,
      children: (
        <div>
            <CardList isUser params={{otherId}} comefrom='otherDetail' />
        </div>
      )
    },
    {
      key: '2',
      label: <div>喜欢{ otherPrivacy.favoriteShow?"":<LockOutlined/>}</div>,
      children: (<div>
        {otherPrivacy.favoriteShow?<CardList  params={{userId:otherId}} comefrom='like' />:<Empty description="对方设置了隐私" image={Empty.PRESENTED_IMAGE_SIMPLE} />}
      </div>)
    },
    {
      key: '3',
      label: <div>收藏{ otherPrivacy.collectionShow?"":<LockOutlined/>}</div>,
      children: (
        <div>
          {
            otherPrivacy.collectionShow?<CardList  params={{userId:otherId}} comefrom='favorite' />:<Empty description="对方设置了隐私" image={Empty.PRESENTED_IMAGE_SIMPLE} />
          }
        </div>
      )
    },
    
  ];
  const Attention = async(item)=>{
    const timer = Math.floor(Date.now() / 1000)
    const data={
      otherId:otherId,
      userId,
      timer,
      type:item.isAttention
  }
    const RES  =await updateFans(data) 
    if(RES.code===200){
      setInfo(pre=>({
        ...userInfo,
        isAttention:!pre.isAttention
      }))
    }
  }
  const visibleShow = (item) => {
    if (!otherPrivacy[item]) {
      message.info('对方设置了私密模式，无法查看')
      return
    }
    setFansShow(true)
    setType(item)
  }
  return (
    <div className={style.Info}>
      <div className={style.header}>
        <div className={style.left}>
          {!userInfo?.avator ? <Avatar src={`localhost:5000//${userInfo?.avator}`} icon={<UserOutlined />} size={180} />
            : <Avatar src={`http://localhost:5000${userInfo?.avator}`} size={180} />}
        </div>
        <div className={style.right}>
          <div className={style.title}>
            <h1 style={{marginRight:"20px"}}>{userInfo?.name||'趣纷享'}</h1>
            {userInfo._id===userId?'':userInfo?.isAttention ? <Button onClick={()=>Attention(userInfo)}>已关注</Button> : <Button onClick={()=>Attention(userInfo)} style={{ backgroundColor: "red" }} type='primary'>关注</Button>}
          </div>
          <p>纷享号:{userInfo?.username} | 地址: 四川</p>
          <div>{userInfo?.signature || '还没有简介...'}</div>
          <div className={style.sex}>
            {userInfo?.sex == 0 ? <WomanOutlined style={{ color: "#fe8495" }} /> :
              <ManOutlined style={{ color: "blue" }} />}
          </div>
          <div className={style.attention}>
            <span onClick={()=>visibleShow("attentionShow")}><i style={{ marginRight: "5px" }}>{userInfo?.attentionNumber || 0}</i>关注</span>
            <span onClick={() => visibleShow("fansShow")}>
              <i style={{ marginRight: "5px" }}>{userInfo?.fansNumber || 0}</i>
              粉丝</span>
          </div>
        </div>
      </div>
      <div className={style.otherButtom}>
        <Tabs defaultActiveKey="1" items={items}/>
      </div>
      <Fans Id={otherId} fansShow={fansShow} type={type} updateFansShow={ ()=> setFansShow(false)} />
    </div>
    
  )
}
export default connect(
  state => {
    return {
      privacy: state.privacy.privacyList
    }
  }
)(UserDetail)